<template>
  <div class="container">
    <el-card>
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        slot="header"
        v-if="subjectName"
      >
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ subjectName }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row>
        <el-col :span="18">
          <el-form
            ref="addEmployee"
            :model="formList"
            label-width="90px"
            :inline="true"
          >
            <el-form-item label="标签名称">
              <el-input
                v-model="formList.tagName"
                placeholder=""
                style="width: 200px"
              />
            </el-form-item>
            <el-form-item label="状态">
              <el-select
                v-model="formList.state"
                placeholder="请选择状态"
                style="width: 200px"
              >
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="btnClear">清除</el-button>
              <el-button size="small" type="primary" @click="btnSearch"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <div style="float: right">
            <el-button
              size="small"
              @click="$router.push('/subjects/list')"
              type="text"
              icon="el-icon-back"
              v-if="subjectName"
              >返回学科</el-button
            >
            <el-button
              size="small"
              @click="btnAddTag"
              type="success"
              icon="el-icon-edit"
              >新增标签</el-button
            >
          </div>
        </el-col>
      </el-row>
      <!-- 提示 -->
      <el-alert
        v-if="alertText !== ''"
        :title="alertText"
        type="info"
        class="alert"
        :closable="false"
        show-icon
        style="margin-bottom: 15px"
      ></el-alert>
      <!-- end -->
      <!-- 数据展示表格 -->
      <el-table
        :data="dataList"
        highlight-current-row
        style="width: 100%"
        v-loading="listLoading"
      >
        <el-table-column
          align="left"
          :label="$t('table.id')"
          type="index"
          width="100px"
        />
        <el-table-column align="left" :label="$t('table.subject')">
          <template slot-scope="scope">
            <span>{{ scope.row.subjectName }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" :label="$t('table.tagName')">
          <template slot-scope="scope">
            <span>{{ scope.row.tagName }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" :label="$t('table.creator')">
          <template slot-scope="scope">
            <span>{{ scope.row.creatorID | usernameFilters }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" :label="$t('table.creatdate')">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" :label="$t('table.state')">
          <template slot-scope="scope">
            <span>{{ scope.row.state | stateFilters }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" :label="$t('table.actions')">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              @click="btnState(scope.row.id, scope.row.state)"
              >{{ scope.row.state === 1 ? "禁用" : "启用" }}</el-button
            >
            <el-button
              size="small"
              type="text"
              :disabled="scope.row.state === 1"
              @click="btnEditTag(scope.row)"
              >修改</el-button
            >
            <el-button
              size="small"
              type="text"
              :disabled="scope.row.state === 1"
              @click="btnDelTag(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- end -->
      <!-- 分页工具条 -->
      <pageTool
        :paginationPage="pagination.page"
        :paginationPagesize="pagination.pageSize"
        :total="pagination.total"
        @pageChange="handleCurrentChange"
        @pageSizeChange="handleSizeChange"
        style="margin-top: 20px; text-align: right"
      >
      </pageTool>
      <!-- end -->
      <!-- 新增/修改标签弹窗 -->
      <tags-add
        :tagData.sync="tagData"
        :tagAddStatus.sync="addTagStatus"
        :subjectId="subjectID"
        @refreshDataList="getList"
        v-if="addTagStatus"
      />
      <!-- end -->
    </el-card>
  </div>
</template>

<script>
import pageTool from './../components/pageTool.vue'
import { list, changeState, remove } from '@/api/hmmm/tags.js'
import TagsAdd from '../components/tags-add.vue'

export default {
  components: { pageTool, TagsAdd },
  data () {
    return {
      formList: {
        tagName: '',
        state: ''
      },
      dataList: [],
      listLoading: true,
      dialogStatus: '',
      addTagStatus: false,
      alertText: '',
      pagination: {
        page: 1,
        pagesize: 10,
        total: 0,
        pageSizes: [10, 20, 30, 50],
        currentPage: 1
      },
      subjectID: this.$route.query.id,
      subjectName: this.$route.query.name,
      tagData: null
    }
  },
  filters: {
    stateFilters (val) {
      return val === 1 ? '已启用' : '未启用'
    },
    usernameFilters (val) {
      switch (val) {
        case 2:
          return '超级管理员'
        case 3:
          return '编辑组'
        default:
          return '未知'
      }
    }
  },
  methods: {
    // 获取数据
    getList (page = this.pagination.currentPage, pagesize = this.pagination.pageSize, tagName, state, subjectID = this.subjectID) {
      this.listLoading = true
      this.pagination.page = page
      this.pagination.currentPage = page
      this.pagination.pageSize = pagesize
      const data = {}
      if (page) {
        data.page = page
      }
      if (pagesize) {
        data.pagesize = pagesize
      }
      if (tagName) {
        data.tagName = tagName
      }
      if (state) {
        data.state = state
      }
      if (subjectID) {
        data.subjectID = subjectID
      }
      list(data)
        .then(res => {
          this.alertText = ''
          this.dataList = []
          this.dataList = res.data.items
          this.pagination.total = res.data.counts
          this.alertText = `共 ${this.pagination.total} 条记录`
          this.listLoading = false
        })
        .catch(e => {
          this.$message.e('错了哦，这是一条错误消息')
          this.listLoading = false
        })
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.getList(1, val)
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.getList(val)
    },
    // 清空按钮
    btnClear () {
      this.formList = {
        tagName: '',
        state: ''
      }
    },
    // 搜索按钮
    btnSearch () {
      this.getList(1, this.pagination.pageSize, this.formList.tagName, this.formList.state)
    },
    // 添加/修改标签
    btnAddTag () {
      this.addTagStatus = true
    },
    // 标签状态修改
    async btnState (id, state) {
      try {
        this.listLoading = true
        state === 1 ? await changeState({ id, state: 0 }) : await changeState({ id, state: 1 })
        this.$message.success('状态修改成功')
        this.getList()
      } catch (e) { this.$message.e('状态修改失败') }
    },
    // 修改标签
    btnEditTag (tagData) {
      this.tagData = tagData
      this.addTagStatus = true
    },
    // 删除标签
    btnDelTag (id) {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove({ id })
          .then(() => {
            this.$message.success('删除成功')
            this.getList()
          })
      }).catch((err) => {
        err !== 'cancel'
          ? this.$message.error(err)
          : this.$message({
            type: 'info',
            message: '已取消删除'
          })
      })
    }
  },
  created () {
    this.getList()
  }

}
</script>

<style scoped lang='scss'>
.container ::v-deep .el-table__header .el-table__cell {
  background-color: #fafafa;
  border-bottom: 2px solid #e8e8e8;
}
</style>
